<style>
    .billBox {
        margin-top: 60px;
        overflow: scroll;
    }
    .weui_cell_ft {
        color: #000;
    }
</style>
<template>
    <x-header style="background-color: rgb(43,165,187);" :left-options="{backText: '返回', showBack: true }" :right-options="{showMore: true}">
        <span style=" color: rgb(221,221,221); font-size:14px; ">{{showToggle? '账单查询':'账单详情'}}</span>
    </x-header>
    <div id="wrapper">
        <div class="billBox">
            <group>
                <cell @click="click()"  v-for="list in queryParams" :title="list.title" :value="list.value | currency '+ ' " is-link></cell>
            </group>
            <x-button type="primary" @click="slideTop">加载更多</x-button>
        </div>
    </div>
    
</template>
<script>
    import XHeader from 'vux/dist/components/x-header'
    import Group from 'vux/dist/components/group'
    import XInput from 'vux/dist/components/x-input'
    import XButton from 'vux/dist/components/x-button'
    import Confirm from 'vux/dist/components/confirm'
    import Cell from 'vux/dist/components/cell'
    import Actionsheet from 'vux/dist/components/actionsheet'
    import Toast from 'vux/dist/components/toast'

    export default {
    	components: {
    		XHeader,
            Group,
            XInput,
            XButton,
            Confirm,
            Cell,
            Actionsheet,
            Toast
    	},
        ready (){
            //页面加载时获取商户账单信息
            this.getData();
        },
        data: function () {
        	return {
        		queryParams: [
                    { id: 1, title: "直付通交易", value: "15.00"},
                    { id: 2, title: "支付宝交易", value: "12.00"},
                    { id: 3, title: "微信交易", value: "13.00"},
                    { id: 4, title: "支付宝交易", value: "12.09"},
                    { id: 5, title: "支付通交易", value: "11.00"},
                    { id: 6, title: "微信交易", value: "10.00"},
                    { id: 7, title: "支付宝交易", value: "9.00"},
                    { id: 8, title: "支付通交易", value: "14.10"},
                    { id: 9, title: "微信交易", value: "16.00"},
                    { id: 10, title: "支付通交易", value: "13.09"}
                ]
        	}
        },
        methods: {
            click: function () {
                this.$route.router.go('billDetails')
                //alert("第"+key+"被点击了----")
            },
            getData: function () {
                /*this.$http.post(接口,参数).then( function () {
                    根据商户信息查询到商户账单列表赋值给 queryParams
                })*/
            },
            slideTop: function () {
                this.queryParams.push({ id: 11, title: "直付通交易", value: "15.00"})
                this.getData();
            }
        }
    }
</script>